<template>
  <div>
    <c-title text="视频任务"></c-title>
    <div class="box">
      <div class="title">任务需要看{{all}}个视频，目前已看{{already}}个视频</div>
      <div class="watch" @click="watchVideo">观看</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      all: 0,
      already: 0
    };
  },
  created() {
    this.getdata();
  },
  methods: {
    getdata() {
      $http.get("plugin.single-return.api.watch.detail",{},"正在加载数据中").then(({ result, msg, data }) => {
        if (result == 1) {
          this.all = data.all;
          this.already = data.already;
        } else this.$toast(msg);
      });
    },
    watchVideo() {
      if (this.fun.isCPS() && this.fun.isCPSAPPI()) {
        let json = { name: "task" };
        if (this.fun.isIosOrAndroid() === "ios") {
          toUrlIOS({ body: "toUrlIOS", json: JSON.stringify(json) });
        } else {
          toUrlAndroid(JSON.stringify(json));
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.box {
  height: 10.5rem;
  background-color: #fff;
  border-radius: 0.2rem;

  .title {
    line-height: 1.5rem;
    border-bottom: 1px solid #ccc;
  }

  .watch {
    color: #fff;
    width: 80%;
    border-radius: 0.5rem;
    line-height: 2rem;
    background-color: rgb(41, 186, 156);
    margin: 6.5rem auto 0;
  }
}
</style>